<template>
  <view class="page" v-if="data">
    <view class="header">
      <view class="hd flex">
        <view class="icon"
          ><i :class="['iconfont', statusData[data.status_ext].icon]"></i
        ></view>
        <view class="text">{{ statusData[data.status_ext].name }}</view>
      </view>

      <view class="des flex">
        <view>{{ statusData[data.status_ext].des }}</view>
        <view class="fwb" v-if="data.status_ext != 2">￥{{ data.price }}</view>
      </view>
    </view>

    <view class="progress-bar">
      <view class="title">{{
        data.type == "1" ? "增值税普通发票" : "增值税专用发票"
      }}</view>

      <view class="progress-bar-list">
        <view class="on">
          <view class="icon"><text></text></view>
          <view class="tit">订单提交</view>
        </view>
        <view :class="[data.trade_status == '3' ? 'on' : '']">
          <view class="icon"><text></text></view>
          <view class="tit">订单完成</view>
        </view>
        <view :class="[data.time_finish > 0 ? 'on' : '']">
          <view class="icon"><text></text></view>
          <view class="tit">开票成功</view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="list">
        <view class="item">
          <view
            :class="[
              'item-bd',
              data.invoice_pics && data.invoice_pics.length ? 'on' : ''
            ]"
          >
            <view class="des">
              <view class="label">发票类型：</view>
              <view class="con">{{
                data.type == "1" ? "增值税普通发票" : "增值税专用发票"
              }}</view>
            </view>
            <view class="des">
              <view class="label">发票内容：</view>
              <view class="con">{{
                data.desc_type == 1 ? "商品明细" : "商品类别"
              }}</view>
            </view>

            <view class="des">
              <view class="label">抬头名称：</view>
              <view class="con">{{ data.invoice_title }}</view>
            </view>
            <view class="des">
              <view class="label">开票金额：</view>
              <view class="con">¥{{ data.price }}</view>
            </view>
            <view class="des">
              <view class="label">开票时间：</view>
              <view class="con">
                {{
                  data.time_finish > 0
                    ? $utils.formatDate(new Date(data.time_finish * 1000))
                    : "-"
                }}
              </view>
            </view>
            <view class="des">
              <view class="label">申请时间：</view>
              <view class="con">
                {{
                  data.created_at > 0
                    ? $utils.formatDate(new Date(data.created_at * 1000))
                    : "-"
                }}
              </view>
            </view>
            <view class="des" v-if="data.reason">
              <view class="label">拒绝原因：</view>
              <view class="con">{{ data.reason }}</view>
            </view>

            <view
              class="img-box"
              v-if="data.invoice_pics && data.invoice_pics.length"
              @click="previewImg"
            >
              <view class="img">
                <image
                  :src="data.invoice_pics[0].pic_url"
                  mode="aspectFill"
                ></image>
                <view class="num">共{{ data.invoice_pics.length }}张</view>
              </view>
              <view class="text">点击预览发票</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="tools-pof">
      <view class="tools-pof-box">
        <view class="btn-box">
          <view
            class="btn"
            @click="
              $utils.toUrl(
                `/order/order-detail/order-detail?id=${data.order_id}`
              )
            "
            >查看订单</view
          >

          <view class="btn on" v-if="data.status_ext == '2'" @click="apply"
            >再次申请</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { list, apply } from "@/api/invoice";

export default {
  data() {
    return {
      placeholderStyle: "color:#8C8C8C;font-size:28rpx;",

      statusData: {
        1: {
          name: "已开票",
          icon: "icon-success",
          des: "已开发票金额："
        },
        0: {
          name: "申请中",
          icon: "icon-clock",
          des: "发票金额："
        },
        2: {
          name: "已被拒",
          icon: "icon-prompt",
          des: "商家已驳回您的申请，请联系商家咨询"
        }
      },
      data: null
    };
  },

  methods: {
    apply() {
      let { order_id, invoice_conf, price, order_no } = this.data;

      this.$utils.toUrl(
        `/invoice/apply/index?order_id=${order_id}&params=${invoice_conf}&price=${price}&order_no=${order_no}`
      );
    },

    previewImg() {
      uni.previewImage({
        current: "0",
        urls: this.data.invoice_pics.map((el) => el.pic_url)
      });
    },

    async init() {
      const res = await list(
        {
          id: this.id
        },
        true
      );
      if (!res.code) {
        this.data = res.data.list[0];
        if (typeof this.data.invoice_pics == "string")
          this.data.invoice_pics = JSON.parse(this.data.invoice_pics);
        return;
      }
      this.$utils.toast(res.msg);
    }
  },

  onLoad(opi) {
    if (opi.id) {
      this.id = opi.id;
    }
  },

  onShow() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 152rpx;
  background: #f0250e;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 134rpx;
    background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
  }
}

.content {
  position: relative;
  z-index: 2;
}

.list {
  padding: 24rpx;
}

.item {
  background: #fff;
  border-radius: 20rpx;
  padding: 10rpx 24rpx;
  margin-bottom: 24rpx;
}

.item-bd {
  position: relative;

  &.on {
    padding-right: 260rpx;
  }

  .img-box {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
    text-align: center;

    .img {
      position: relative;
      border-radius: 20rpx;
    }

    image {
      display: block;
      width: 210rpx;
      height: 140rpx;
      border-radius: 20rpx;
    }

    .num {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 34rpx;
      border-radius: 0 0 20rpx 20rpx;
      background: rgba(0, 0, 0, 0.5);
      font-size: 24rpx;
      color: #fff;
    }

    .text {
      padding-top: 5rpx;
      color: #8c8c8c;
      font-size: 24rpx;
    }
  }

  .des {
    display: flex;
    align-items: center;
    padding: 14rpx 0;
    font-size: 28rpx;

    &:last-of-type {
      border-bottom: 0;
    }
  }

  .label {
    margin-right: 20rpx;
  }

  .con {
    flex: 1;
    overflow: hidden;
    color: #262626;
    font-weight: bold;
  }
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}

.tools-pof-box {
  padding: 10rpx 36rpx;
  padding: 10rpx 36rpx calc(constant(safe-area-inset-bottom) + 10rpx);
  padding: 10rpx 36rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  // align-items: center;
  // justify-content: space-between;
}

.btn {
  margin-left: 24rpx;
  padding: 12rpx 28rpx;
  border-radius: 32px;
  font-size: 24rpx;
  color: #262626;
  border: 1px solid #999;

  &.on {
    background: #f0250e;
    color: #fff;
    border-color: #f0250e;
  }
}

.header {
  color: #fff;

  .flex {
    display: flex;
    align-items: center;
  }

  .iconfont {
    position: relative;
    top: 2rpx;
    font-size: 50rpx;
    font-weight: bold;
  }

  .text {
    margin-left: 16rpx;
    font-size: 40rpx;
    font-weight: bold;
  }

  .des {
    padding-top: 26rpx;
  }

  .fwb {
    font-weight: bold;
  }
}

.progress-bar {
  position: relative;
  z-index: 2;
  margin: 0 24rpx;
  padding: 30rpx 0;
  background: #fff;
  border-radius: 20rpx;

  .title {
    padding-bottom: 44rpx;
    text-align: center;
    font-size: 30rpx;
  }
}

.progress-bar-list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 56rpx;

  &:after {
    content: "";
    position: absolute;
    top: 7%;
    left: 14%;
    right: 14%;
    height: 1px;
    background: #e6e6e6;
  }

  .tit {
    padding-top: 30rpx;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .icon {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 auto;
    width: 18rpx;
    height: 18rpx;

    text {
      position: relative;
      display: block;
      z-index: 2;
      width: 18rpx;
      height: 18rpx;
      border-radius: 32px;
      background: #bababd;
    }

    &:before {
      content: "";
      position: absolute;
      left: -8rpx;
      top: -8rpx;
      right: -8rpx;
      bottom: -8rpx;
      border-radius: 32px;
      background: #f2f2f2;
    }
  }

  .on {
    .tit {
      color: #262626;
    }

    .icon {
      text {
        background: #f0250e;
      }

      &:before {
        background: #fdf1f0;
      }
    }
  }
}
</style>
